import React,{Component} from 'react';
import { Form, Input, Button, Checkbox,message} from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import '../../css/login.css'
import 'antd/dist/antd.css';
import storageUtil from '../../utils/storageUtil'



class Login extends Component{

    render() {

        const onFinish = (values:any) => {
            this.$myAxios.post('/user/login',values).then(res => {
                console.log(res.data)
                const isadmin = res.data['data']['isadmin'];
                if(res.data['code'] === 0&&isadmin == 0){
                    message.success('登录成功')
                    storageUtil.saveUser(res.data['data'])
                    console.log(storageUtil.getUser())
                    this.props.history.push('/admin')
                }
                else if(res.data['code'] === 0 && isadmin == 1){
                    message.success("管理员登录成功")
                    storageUtil.saveServicer(res.data['data'])
                    console.log(storageUtil.getServicer())
                    this.props.history.push('/manager')
                }
                else {
                    message.error('账号密码错误或用户不存在')
                }
            })
        };
        return(
                <Form
                    style={{marginLeft: '750px',marginTop: '300px'}}
                    name="normal_login"
                    className="login-form"
                    initialValues={{ remember: true }}
                    onFinish={onFinish}
                >
                    <Form.Item
                        name="username"
                        rules={[{ required: true, message: 'Please input your Username!' }]}
                    >
                        <Input
                            prefix={<UserOutlined className="site-form-item-icon" />} placeholder="Username" />
                    </Form.Item>
                    <Form.Item
                        name="userpwd"
                        rules={[{ required: true, message: 'Please input your Password!' }]}
                    >
                        <Input
                            prefix={<LockOutlined className="site-form-item-icon" />}
                            type="password"
                            placeholder="Password"
                        />
                    </Form.Item>
                    <Form.Item>
                        <Form.Item name="remember" valuePropName="checked" noStyle>
                            <Checkbox>Remember me</Checkbox>
                        </Form.Item>

                    </Form.Item>

                    <Form.Item>
                        <Button type="primary" htmlType="submit" className="login-form-button">
                            Log in
                        </Button>
                        or <a href="/register">register now!</a>
                    </Form.Item>
                </Form>

        )
    }
}

export default Login